<template>
  <block v-for="(item,index) in list" :key="item.id">
    <house-item :item="item" customStyle="background:#fff;margin:20rpx" page="/" :imageWidth="234" imageHeight="192">
      <template #right>
        <view class="u-flex-between u-flex-column u-flex-fill">
          <view class="house-name u-flex-y-center u-flex-between">
            <view>{{item.title}}</view>
            <u-image :src="item.show?'/static/images/01_18mj.png':'/static/images/01_18efd.png'"
              @click.stop="changeItem(item)" width="34rpx" height="34rpx" :fade="false"></u-image>
          </view>
          <view class="house-desc" v-if="item.description">“这里是亮点描述内容”</view>
          <view class="house-info">“{{item.house_type_text}} | {{item.space}}m²”</view>
          <view class="house-price u-flex-y-center u-flex-between">
            <text>市场价：{{item.mart}}万</text>
            <text>优惠价：{{item.price}}万</text>
          </view>
        </view>
      </template>
    </house-item>
  </block>
  <view class="send-btn" @click="handleCofirm">
    确定
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { onReachBottom } from '@dcloudio/uni-app'
  import { houseList } from '../../../config/api';
  const list = ref([])
  onMounted(() => {
    _house_lst()
  })
  const changeItem = (row) => {
    list.value.forEach(item => {
      if (row.id == item.id) item.show = true
      else item.show = false
    })
  }
  const _house_lst = () => {
    houseList({ page: 1, limit: 200 }).then(res => {
      console.log(res)
      list.value = res.data.data.map(item => {
        item.show = false
        return item
      })
    })
  }
  const handleCofirm = () => {
    let obj = list.value.find(item => item.show)
    uni.$emit('formEvent', { ...obj })
    uni.navigateBack()
  }
</script>

<style scoped lang="scss">
  .house-name {
    font-size: 26rpx;
    color: #333;
    font-weight: 800;
  }

  .house-info {
    font-size: 24rpx;
    font-weight: 500;
    color: #666;
  }

  .house-desc {
    font-size: 22rpx;
    color: #E47117;
  }

  .house-price {
    color: #DF0F0F;
    font-weight: 800;
    font-size: 24rpx;
  }

  .send-btn {
    width: 690rpx;
    height: 90rpx;
    background: #F87610;
    border-radius: 50rpx;
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    line-height: 90rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #fff;
  }
</style>